<template>
	<view class="content">
		<LoadingTips v-if="showLoading" :imageUrl="imageUrl" :type="2"></LoadingTips>
		<view v-if="zcType==2" url="/page_other/policy/detail" class="btn">
			根据您的情况，为您匹配到以下政策
		</view>
		<view class="article-tab">
			<view @click="getNewsList(1)" :class="tabActive==1?'active':''" class="tab-item">就业类<view
					v-if="economicsCount>0" class="count">{{economicsCount}}</view>
			</view>
			<view @click="getNewsList(4)" :class="tabActive==4?'active':''" class="tab-item">创业类<view
					v-if="housingCount>0" class="count">{{housingCount}}</view>
			</view>
			<view @click="getNewsList(5)" :class="tabActive==5?'active':''" class="tab-item">社保类<view
					v-if="serviceCount>0" class="count">{{serviceCount}}</view>
			</view>
			<view @click="getNewsList(6)" :class="tabActive==6?'active':''" class="tab-item">培训类<view
					v-if="serviceCount>0" class="count">{{serviceCount}}</view>
			</view>
			<view @click="getNewsList(7)" :class="tabActive==7?'active':''" class="tab-item">其他类<view
					v-if="otherCount>0" class="count2">{{otherCount}}</view>
			</view>
		</view>
		<!-- 	<view class="block">
		<input @confirm="searchConfirm" name="searchKey" class="search" type="text" maxlength="30"
			placeholder="请输入关键字" placeholder-class="inputPlaceholder" confirm-type="search" />
		<view class="iconfont icon-sousuo"></view>
	</view> -->
		<view class="middle">
			<view v-if="tabActive==1" class="article-list">
				<template v-if="list4.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in list4" :key="item.id">
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="time">发布日期：{{item.crt_time}}</view>
							</view>
				</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>

			<view v-if="tabActive==4" class="article-list">
				<template v-if="list5.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in list5" :key="item.id">
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="time">发布日期：{{item.crt_time}}</view>
						</view>
					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
			<view v-if="tabActive==5" class="article-list">
				<template v-if="list6.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in list6" :key="item.id">
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="time">发布日期：{{item.crt_time}}</view>
						</view>
					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
			<view v-if="tabActive==6" class="article-list">
				<template v-if="list6.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in list8" :key="item.id">
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="time">发布日期：{{item.crt_time}}</view>
						</view>
					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
			<view v-if="tabActive==7" class="article-list">
				<template v-if="list7.length>0">
					<view @click="navigate('/page_other/article/detail?id='+item.id)" class="article-item"
						v-for="(item,index) in list7" :key="item.id">
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="time">发布日期：{{item.crt_time}}</view>
							</view>
				</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNewsList as getNewsListApi
	} from '@/api/notice.js';
	import {
		getMatchingCountApi
	} from '@/api/userPolicyInfo.js';

	export default {
		data() {
			return {
				tabActive: 1,
				list4: [],
				list5: [],
				list6: [],
				list7: [],
				list8: [],
				economicsCount: 0,
				housingCount: 0,
				serviceCount: 0,
				otherCount: 0,
				page: 1,
				limit: 10,
				zcType: 1,
				showLoading: false,
				imageUrl: '',
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getNewsList(type) {
				this.tabActive = type;
				let _this = this;
				// this.showLoading = true;
				getNewsListApi({
					type: type,
					zcType: this.zcType,
					page: this.page,
					limit: this.limit
				}).then((res) => {

					switch (type) {
						case 1:
							this.list4 = res.list ?? [];
							this.economicsCount = 0;
							break;
						case 4:
							this.list5 = res.list ?? [];
							this.housingCount = 0;
							break;
						case 5:
							this.list6 = res.list ?? [];
							this.serviceCount = 0;
							break;
						case 6:
							this.list8 = res.list ?? [];
							this.serviceCount = 0;
							break;
						case 7:
							this.list7 = res.list ?? [];
							this.otherCount = 0;
							break;
					}
				}).catch((res) => {
					console.log(res)
				}).finally(() => {
					setTimeout(() => {
						this.showLoading = false
					}, 2000)
				})
			},
			getEconomicsCount() {
				getMatchingCountApi({
					type: 1
				}).then((res) => {
					this.economicsCount = res;
				}).catch((res) => {
					console.log(res)
				})
			},
			getHousingCount() {
				getMatchingCountApi({
					type: 4
				}).then((res) => {

					this.housingCount = res;

				}).catch((res) => {
					console.log(res)
				})
			},
			getServiceCount() {
				getMatchingCountApi({
					type: 5
				}).then((res) => {

					this.serviceCount = res;

				}).catch((res) => {
					console.log(res)
				})
			},
			getOtherCount() {
				getMatchingCountApi({
					type: 8
				}).then((res) => {

					this.otherCount = res;

				}).catch((res) => {
					console.log(res)
				})
			},
		},
		onLoad(e) {
			this.imageUrl = this.globalConfig.imageUrl;
			this.zcType = e.zcType
			this.getNewsList(1);
			if (this.zcType == '2') {
				this.getEconomicsCount();
				this.getHousingCount();
				this.getServiceCount();
				this.getOtherCount();
			}

		},
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		background-color: #FAFAFA;
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100%;

		.btn {
			width: 280px;
			height: 60rpx;
			line-height: 58rpx;
			border-radius: 40rpx;
			text-align: center;
			color: #fff;
			background-color: #ff7626;
			font-size: 28rpx;
			margin-left: 48px;
			margin-bottom: 30rpx;
		}

		.block {
			width: 100%;
			margin-bottom: 40rpx;
			margin-top: 20rpx;
			position: relative;

			.search {
				width: 100%;
				height: 70rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background: #F3F3F3;
				border-radius: 50rpx;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				right: 10rpx;
				top: 50%;
				font-size: 42rpx;
				font-weight: bold;
				color: #999;
			}
		}

		.article-tab {
			width: 100%;
			height: 70rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 30rpx;
			color: #313131;
			padding-left: 23rpx;

			.tab-item {
				margin-right: 16px;
				align-items: center;
				justify-content: center;
				color: darkgray;
				position: relative;

				.count {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					color: #fff;
					background-color: red;
					font-size: 22rpx;
					line-height: 30rpx;
					padding-top: -10rpx;
					text-align: center;
					//font-weight: 300;
					margin: -40% 0 0 85%;

					position: absolute;
				}

				.count2 {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					color: #fff;
					padding-top: -40rpx;
					background-color: red;
					font-size: 22rpx;
					line-height: 30rpx;
					text-align: center;
					//font-weight: 300;
					margin: -64% 0 0 85%;
					position: absolute;
				}
			}

			.tab-item.active {
				color: black;
				font-weight: bold;
			}
		}

		.middle {
			background-color: #FFFFFF;
			border-radius: 15rpx;
			border-bottom: 1px solid #FAFAFA;

			.article-list {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 20rpx;

				.article-item {
					height: 100%;
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: row;

					.cover-photo {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						background: #efefef;
					}

					.info {

						height: 100%;

						.title {
							font-size: 30rpx;
						}

						.time {
							font-size: 28rpx;
							color: #999;
							padding-top: 40rpx;
						}
					}
				}

				.article-item:last-child {
					border: none;
				}
			}
		}

	}
</style>
